<div id="root">
    <qf-nav-bar left-arrow title="用户创建" @click-left="clickLeftFn" @click-right="clickRightFn"></qf-nav-bar>
    <h1>表单组件</h1>
    <qf-table @submit="submitFn"></qf-table>
    <h1>按钮组件</h1>
    <qf-button type="primary" content="主要按钮"></qf-button>
    <qf-button type="info" content="信息按钮"></qf-button>
    <qf-button type="default" content="默认按钮"></qf-button>
    <qf-button type="warning" content="警告按钮"></qf-button>
    <qf-button type="danger" content="危险按钮"></qf-button>
    <h1>loading1组件</h1>
    <qf-loading1 :state="loading1State"></qf-loading1>
    <button @click="loading1State=true">显示按钮</button>
    <button @click="loading1State=false">隐藏按钮</button>
    <h1>loading2组件</h1>
    <qf-loading2 :state.sync="loading2State"></qf-loading2>
    <button @click="loading2State=true">显示loading</button>
    <h1>dialog组件</h1>
    <qf-dialog :visible.sync="dialogState" title="用户创建" content=""></qf-dialog>
    <button @click="dialogState = true">显示对话框</button>
    <h1>分页组件</h1>
    <qf-page :total="16" :page-size="2" @click-page="changePageFn"></qf-page>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="./qfui.css">
<script src="./qfui.js"></script>
<script>
    const vm = new Vue({
        el: "#root",
        data: {
            loading1State: false,
            loading2State: false,
            dialogState: false,
        },
        methods: {
            changePageFn(pageNum) {
                console.log('点击了分页',pageNum);
            },
            submitFn(formData) {
                console.log('用户数据',formData);
                alert('用户创建请求接口伪代码..')
            },
            clickLeftFn() {
                alert('clickleft')
            },
            clickRightFn() {
                alert('clickright')
            },
        }
    })
</script>